<template>
  <view class="scrollTabs">
    <u-scroll-list>
      <view class="scroll-list">
        <view
          class="scroll-list__line"
          v-for="(item, index) in data"
          :key="index"
        >
          <view
            class="scroll-list__line__item"
            v-for="(item1, index1) in item"
            :key="index1"
            :class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']"
          >
            <image
              class="scroll-list__line__item__image"
              :src="item1.icon"
              mode=""
            ></image>
            <view class="scroll-list__line__item__text">{{ item1.name }}</view>
          </view>
        </view>
      </view>
    </u-scroll-list>
  </view>
</template>

<script>
export default {
  name: "lr-scrollTabs",
  data(){
    return {
      scrollLeft: 0,
      activeIndex: 0,
    }
  },
  props: {
    height: {
      type: String,
      default: '316rpx'
    },
    data: {
      type: Array,
      default: () => {
        return [
          [
            { icon: require(`@/static/images/icon.png`), name: '语文', path: ``, auth: `` },
            { icon: require(`@/static/images/icon.png`), name: '数学', path: ``, auth: `` },
            { icon: require(`@/static/images/icon.png`), name: '化学', path: ``, auth: `` },
            { icon: require(`@/static/images/icon.png`), name: '生物', path: ``, auth: `` },
            { icon: require(`@/static/images/icon.png`), name: '英语', path: ``, auth: `` },
            { icon: require(`@/static/images/icon.png`), name: '历史', path: ``, auth: `` },
            { icon: require(`@/static/images/icon.png`), name: '艺术', path: ``, auth: `` },
            {
              icon: require(`@/static/images/icon.png`),
              name: '政治',
              path: ``,
              auth: ``
            },
          ], [
            { icon: require(`@/static/images/icon.png`), name: '语文', path: ``, auth: `` },
            { icon: require(`@/static/images/icon.png`), name: '数学', path: ``, auth: `` },
            { icon: require(`@/static/images/icon.png`), name: '化学', path: ``, auth: `` },
            { icon: require(`@/static/images/icon.png`), name: '生物', path: ``, auth: `` },
            { icon: require(`@/static/images/icon.png`), name: '英语', path: ``, auth: `` },
            { icon: require(`@/static/images/icon.png`), name: '历史', path: ``, auth: `` },
            { icon: require(`@/static/images/icon.png`), name: '艺术', path: ``, auth: `` },
            { icon: require(`@/static/images/icon.png`), name: '政治', path: ``, auth: `` }
          ]
        ]
      }
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.scrollTabs {
  width: 100%;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;

  .scroll-list {
    display: flex;
    flex-direction: row;

    &__line {
      padding: 20rpx 20rpx 0 0rpx;
      min-width: 686rpx;
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      &__item {
        margin-bottom: 20rpx;
        width: 25%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;

        &__image {
          width: 60rpx;
          height: 60rpx;
        }

        &__text {
          margin-top: 10rpx;
          color: #000000;
          font-size: 12px;
          text-align: center;
        }

        &--no-margin-right {
          margin-right: 0;
        }
      }
    }
  }

}
</style>
